import React, { useState } from 'react'
import img1 from '../../../../assets/微信图片_20200724221000.jpg'
import './index.scss'
import IMPic from '../../../../components/IMPic'
import IMShowPic from '../../../../components/IMShowPic'
const Selected = () => {
    const [visible, setVisible] = useState<boolean>(false)
    const [checked, setChecked] = useState<string>('')
    const handleClick = (imgUrl: string) => {
        setChecked(imgUrl)
        setVisible(true)
    }
    const handleCancel = () => {
        setVisible(false)
    }
    return <div className="im_selected">
        <h3 className="title">精选</h3>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="im_selected_module">
                <IMPic imgUrl={img1} className="item-1" handleClick={handleClick}></IMPic>
                <IMPic imgUrl={img1}></IMPic>
                <IMPic imgUrl={img1}></IMPic>
                <IMPic imgUrl={img1}></IMPic>
                <IMPic imgUrl={img1}></IMPic>
            </div>
        </div>
        <IMShowPic handleCancel={handleCancel} visible={visible} data={{ imgSrc: checked }}></IMShowPic>
    </div>
}

export default Selected